<template class='head w100'>
  <van-sticky>
    <van-nav-bar :title="headTitle"
                @click-left="leftClicked">
      <!-- 左边图标 -->
      <div
        class="left"
        slot="left">
          <van-icon :name="leftIcon"
          :color="types==='home'?'black':''"
          :size="types==='home'?'.35rem':'.45rem'" />
          <span v-show="types==='home'"
          class="van-ellipsis">
          {{showCityName}}</span>
            <!-- overflow: 'hidden',width: '1rem',henght:'0.5rem', -->
            <!-- 'text-overflow':'ellipsis','display':'-webkit-box',
            '-webkit-box-orient':'vertical','-webkit-line-clamp':1 -->
      </div>
      <!-- 右边图标 -->
      <div v-if="rightFlag"
        class="right"
        slot="right">
          <van-icon :name="rightFlag" @click="rightClicked" size=".45rem" />
      </div>
    </van-nav-bar>
  </van-sticky>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import Vue from 'vue'
import { NavBar, Icon, Sticky, Toast } from 'vant'
Vue.use(NavBar).use(Icon).use(Sticky).use(Toast)

export default {
  data () {
    return {
      address_icon: 'delete'
    }
  },
  props: {
    types: {
      type: String,
      default: 'home'
    },
    fdname: {
      type: String,
      default: '电影名'
    }
  },
  mounted () {
    switch (this.types) {
      case 'home':
        this.HEADTITLE('首页')
        // this.HEADRIGHT('scan')
        this.HEADRIGHT('')
        break
      case 'cities':
        this.HEADTITLE(`当前城市 ${this.cityName}`)
        this.HEADRIGHT('')
        break
      case 'fm_details':
        this.HEADTITLE(this.fdname)
        this.HEADRIGHT('')
        break
      case 'classify':
        this.HEADTITLE('分类')
        this.HEADRIGHT('search')
        break
      case 'details':
        this.HEADTITLE('商品详情')
        this.HEADRIGHT('')
        break
      case 'search':
        this.HEADTITLE('Search')
        this.HEADRIGHT('')
        break
      case 'shopcart':
        this.HEADTITLE('购物车')
        this.HEADRIGHT('edit')
        break
      case 'payment':
        this.HEADTITLE('支付页面')
        this.HEADRIGHT('')
        break
      case 'address':
        this.HEADTITLE('地址管理')
        this.HEADRIGHT(this.address_icon)
        break
      case 'user':
        this.HEADTITLE('我的')
        this.HEADRIGHT('wap-nav')
        break
      case 'mine':
        this.HEADTITLE('个人中心')
        this.HEADRIGHT('')
        break
      case 'login':
        this.HEADTITLE('登录')
        this.HEADRIGHT('')
        break
      case 'register':
        this.HEADTITLE('注册')
        this.HEADRIGHT('')
        break
      case 'issue_goods':
        this.HEADTITLE('管理商品')
        this.HEADRIGHT('')
        break
      default:
        this.HEADTITLE('首页')
        this.HEADRIGHT('')
    }
  },
  computed: {
    ...mapState('headModule', ['headTitle', 'rightFlag']),
    ...mapState('cityModule', ['cityName', 'Postcodes']),
    leftIcon () {
      if (this.types === 'home') {
        return 'location'
      }
      return 'arrow-left'
    },
    showCityName () {
      return this.cityName.length <= 5 ? this.cityName : (this.cityName.substr(0, 5) + '...')
    }
  },
  methods: {
    ...mapMutations('headModule', ['HEADSETTING', 'HEADTITLE', 'HEADLEFT', 'HEADRIGHT']),
    ...mapActions('addressModule', ['deleteArea']),
    leftClicked: function () {
      switch (this.types) {
        case 'home':
          this.$router.push({ name: 'Show-city' })
          break
        case 'address':
          if (this.$route.name === 'Address-list') {
            this.$router.push({ name: 'Shopcart' })
          } else {
            this.$router.push({ name: 'Address-list' })
          }
          break
        case 'login':
        case 'register':
          this.$router.push({ name: 'Home' })
          break
        case 'shopcart':
          this.$router.push({ name: 'Home' })
          break
        case 'user':
        case 'fm_details':
        case 'details':
        case 'cities':
        case 'classify':
        case 'search':
        default:
          this.$router.back()
      }
    },
    rightClicked () {
      switch (this.types) {
        case 'home':
          // console.log('home')
          break
        case 'classify':
          this.$router.push({ name: 'Search' })
          break
        case 'shopcart':
          this.$router.push({ name: 'Address-list' })
          break
        case 'user':
          this.$router.push({ name: 'Menu' })
          break
        case 'address':
          this.deleteArea()
          break
        default:
          console.log('unknown props of types')
      }
    }
  },
  watch: {
    $route: function (val) {
      this.address_icon = val.name === 'Address-list' ? 'delete' : ''
      this.HEADRIGHT(this.address_icon)
      if (val.name === 'Now-soon') {
        this.HEADRIGHT('wap-nav')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.head {
  height: 1.2rem;
}
</style>
